<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>招贤纳士</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/swiper.min.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/hr.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/join-us-1.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-2.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-3.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-4.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-5.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-6.jpg" /></div>
            <div class="swiper-slide"><img src="image/join-us-7.jpg" /></div>
            <div class="swiper-slide">
                <img src="image/join-us-8.jpg" />
                <div class="card-container">
                    <div class="card-wrap">
                        <div id="card-dom" class="card">
                        </div>
                    </div>
                    <script id="card" type="text/html">
                        {{each list}}
                        <div class="card-item">
                            <div class="card-title"><strong>{{ $value.name }}</strong><span class="home-icon"></span></div>
                            <div class="card-content">
                                <ul>
                                    {{each $value.list}}
                                    <li><a data-id="{{ $value.id }}" href="javascript:;">{{ $value.title }} <i class="icon icon-card"></i></a></li>
                                    {{/each}}
                                </ul>
                            </div>
                        </div>
                        {{/each}}
                    </script>
                </div>
                <div class="layer">
                    <span>HR-TEL:028-85170028，13608231205</span>
                    <hr />
                    <span>HR-EML:honeybee20150101@163.com</span>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="fixed-bottom">
        <i class="join-us-icon"></i>
        <i class="join-us-icon-yellow" style="display:none;"></i>
    </div>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/swiper.min.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            var id = 0;
            bee.request({
                url: '/Index/Hr/index',
                data: null,
                success: function(result) {
                    $('.card-container .card').width(result.list.length * 202 + 20);
                    bee.template('card', result, true);
                    $('body').on('click', '.card-container .card-item a', function() {
                        id = $(this).attr('data-id');
                        bee.request({
                            url: '/Index/Hr/getOne',
                            data: {
                                id: id
                            },
                            success: function(rs) {
                                $('.dialog .dialog-title').text(rs.info.title);
                                $('.dialog .dialog-body').html(rs.info.content).html($('.dialog .dialog-body').text());
                                $('.dialog').dialog('show');
                            }
                        });
                    });
                }
            });

            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                direction: 'vertical',
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 0,
                mousewheelControl: true,
                onTransitionEnd: function(e) {
                    if (e.activeIndex < 3) {
                        $('.join-us-icon').show();
                        $('.join-us-icon-yellow').hide();
                    } else if (e.activeIndex > 2 && e.activeIndex < 7) {
                        $('.join-us-icon').hide();
                        $('.join-us-icon-yellow').show();
                    } else {
                        $('.join-us-icon, .join-us-icon-yellow').hide();
                    }
                }
            });

            var flag = true;
            setInterval(function() {
                if (flag) {
                    $('.fixed-bottom i').animate({
                        'margin-top': '6px'
                    }, 300);
                    flag = false;
                } else {
                    $('.fixed-bottom i').animate({
                        'margin-top': '20px'
                    }, 200);
                    flag = true;
                }
            }, 100);

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
                bee.open('attachment.html', {
                    id: id
                });
            });

            $('body').on('click', '.ok', function() {
                $('.dialog').dialog('hide');
            });

        });
    </script>
    <div class="dialog">
        <div class="dialog-title">

        </div>
        <div class="dialog-body" style="min-height: 220px;">

        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue ok">随便看看</a>
            <a href="javascript:;" class="font-red close" style="margin-left: 40%;">立即申请</a>
        </div>
    </div>
</body>

</html>
